import React from 'react';
import {Popconfirm, Space, Table,Modal,Tag } from 'antd';
import dayjs from "dayjs";
import {connect} from "react-redux";

const { Column } = Table;

function SubDetails(props) {
    let {tableData,modalShow,modalCancel,subAllOptions} = props
    let dateFormat='YYYY-MM-DD HH:mm:ss'
    const getSubType = (text,record) => {
        let str = '-'
        let curData = subAllOptions.filter(item=>item.subType === record.subType)
        if(curData.length>0){
            str = curData[0].subName
        }
        return str
    }
    return (
        <Modal
            open={modalShow}
            title='订阅记录'
            onCancel={modalCancel}
            footer={(_, { OkBtn, CancelBtn }) => (
                <>
                    <CancelBtn />
                </>
            )}
        >
        <Table dataSource={tableData}>
            <Column title="订阅类型" dataIndex="subscripte_type" key="subscripte_type"  render={(text, record) =>
                <span>{getSubType(text,record)}</span>
            }/>
            <Column title="付费金额" dataIndex="bqMoney" key="bqMoney" />
            <Column title="开始时间" dataIndex="startDate" key="startDate"
                    render={(text, record) =>
                        <span>{dayjs(text).format(dateFormat)}</span>
                    }/>
            <Column title="到期时间" dataIndex="endDate" key="endDate" sorter
                    render={(text, record) =>
                        <span>{dayjs(text).format(dateFormat)}</span>
                    }/>
            <Column title="状态" dataIndex="subStatus" render={(text, record) =>(
                text==0
                    ?<Tag color="success">正常</Tag>
                    :<Tag color="error">过期</Tag>
            )}/>
        </Table>
     </Modal>
    );
}

const mapStateToProps = (state:any)=> {
    return{
        subAllOptions:state.subData.subAllOptions,
    }
}
export default connect(mapStateToProps)(SubDetails);

